<template>
  <div>
    <h1>【aty-icon】 component demo</h1>
    <p>【aty-icon】 本质</p>
    <h1>1.图标类型</h1>
    <div class="fd-icon-box">
      <div class="fd-icon-item" v-for="(item,index) in iconList">
        <aty-icon :type="item" :size="size" @click="click(item)" />
      </div>
    </div>
    
    <h1>2.图标大小</h1>
    <p>size:图标的大小，单位是 px</p>
    <div>
      <b>size:35px</b>
      <span v-for="(item,index) in iconList">
        <aty-icon class="fd-icon-item2" :type="item" :size="35" @click="click(item)" />
      </span>
    </div>
    <div>
      <b>size:21px</b>
      <span v-for="(item,index) in iconList">
        <aty-icon class="fd-icon-item2" :type="item" :size="21" @click="click(item)" />
      </span>
    </div>
    
    <div>
      <b>size:12px</b>
      <span v-for="(item,index) in iconList">
        <aty-icon class="fd-icon-item2" :type="item" :size="12" @click="click(item)" />
      </span>
    </div>

    <h1>2.图标颜色</h1>
    <p>color:图标的颜色</p>
    <div>
      <span v-for="(item,index) in iconList">
        <aty-icon class="fd-icon-item2" color="red" :type="item" :size="21" @click="click(item)" />
      </span>
    </div>
    <div>
      <span v-for="(item,index) in iconList">
        <aty-icon class="fd-icon-item2" color="green" :type="item" :size="21" @click="click(item)" />
      </span>
    </div>
  </div>
</template>
<script>
//  import { Alert, Icon } from 'Artery';
export default {
  data () {
    return {
      size: 32,
      color: '#464c5b',
      iconList: [
        'alert',
        'alert-circled',
        'wrench',
        'woman',
        'wineglass',
        'wifi',
        'waterdrop',
        'wand',
        'volume-mute',
        'volume-medium',
        'volume-low',
        'volume-high',
        'videocamera',
        'usb',
        'upload',
        'unlocked',
        'university',
        'umbrella',
        'tshirt-outline',
        'tshirt',
        'trophy',
        'trash-b',
        'trash-a',
        'transgender'
      ]

    }
  },
  methods: {
    click: function (type) {
      Artery.message.info(type)
    }
  }
  //  components: { Alert, Icon }
}
</script>

<style  scoped>
        .fd-icon-box {
            overflow: hidden;
        }
        .fd-icon-item {
            float: left;
            margin: 6px 6px 6px 0;
            width: 145px;
            text-align: center;
            list-style: none;
            cursor: pointer;
            height: 100px;
            color: #5c6b77;
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
            position: relative;
            padding-top: 10px;
        }
        .fd-icon-item2 {
            width: 37px;
            text-align: center;
            cursor: pointer;
            height: 50px;
            color: #5c6b77;
            position: relative;
        }
</style>
